* { margin: 0; padding: 0; }
body { font-family: "Microsoft yahei", Arial; background: #eee; }
.box { width: 500px; height: 500px; margin: 50px auto; }
.box ul li { float: left; width: 190px; height: 190px; background: #979797; border: solid 10px #979797; margin: 10px; list-style: none; position: relative; overflow: hidden; }
.box ul li .cover a { width: 30px; height: 30px; background: #ffffff; display: block; border-radius: 50%; line-height: 30px; margin: 30px auto; }
.box ul li .cover a i { color: red; }
.box ul li .cover {
	width: 202px;
	height: 209px;
	background: rgba(255, 39, 42, 0.7);
	position: absolute;
	left: -9px;
	top: -10px;
	text-align: center;
	color: #ffffff;
	transform-origin: right bottom;
	-webkit-transform-origin: right bottom;
	-moz-transform-origin: right bottom;
	transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	transition: all 0.35s;
	-webkit-transition: all 0.35s;
	-moz-transition: all 0.35s;
}
.box ul li .cover p { margin-top: 10px; font-size: 14px; }
.box ul li:hover .cover { transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); }
